<template>
  <div>
    <el-table :data="tableData"
              style="width: 100%"
              align="center">
      <el-table-column label="班级名称"
                       width="180"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.cname }}</span>
        </template>
      </el-table-column>

      <el-table-column label="文理分科"
                       width="150"
                       align="center">
        <template slot-scope="scope">
          <div slot="reference"
               class="name-wrapper"
               v-if="scope.row.status == 0">
            <el-tag size="medium"> 暂未分班 </el-tag>
          </div>
          <div slot="reference"
               class="name-wrapper"
               v-if="scope.row.status == 1">
            <el-tag size="medium"> 文科 </el-tag>
          </div>
          <div slot="reference"
               class="name-wrapper"
               v-if="scope.row.status == 2">
            <el-tag size="medium"> 理科 </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="班主任"
                       width="150"
                       align="center">
        <template slot-scope="scope">
          <div slot="reference"
               class="name-wrapper"
               v-if="scope.row.headTeacher == null">
            <el-tag size="medium"> 暂未分配 </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="selectNohead(scope.row.id)">分配班主任</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="选择教师"
               :visible.sync="dialogVisible"
               width="30%"
               style="text-align: center">
      <!-- 班主任选择选择-->
      <el-select v-model="name"
                 placeholder="请选择教师">
        <el-option v-for="item in options"
                   :key="item.name"
                   :label="item.label"
                   :value="item.name"
                   @change="addHeadTeacher()">
        </el-option>
      </el-select>
      <span slot="footer"
            class="dialog-footer"
            style="margin-right: 5%">
        <el-button type="primary"
                   @click="addHeadTeacher(), (dialogVisible = false)">确 定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>

    <!-- 分页组件 -->
    <el-pagination @next-click="next"
                   @prev-click="prev"
                   :current-page="currentPage"
                   :page-sizes="[8]"
                   :page-size="size"
                   layout="total, sizes, prev, pager, next"
                   :total="total"
                   align="center">
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../../assets/commons";
export default {
  data () {
    return {
      currentPage: 1, //当前页
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 8, //每页大小
      tableData: [],
      dialogVisible: false,

      options: [],
      name: "",
      label: "",

    };
  },
  methods: {
    //查询所有与该班相关的教师信息
    selectNohead (id) {
      this.dialogVisible = true;
      this.id = id;
      this.options = []
      console.info(this.id);

      axios
        .get(commons.baseUrl + "gradedean/teacher?id=" + this.id)
        .then((res) => {
          // this.options = res.data.data
          console.log(res);
          res.data.data.forEach(element => {
            this.options.push({
              name: element, label: element
            })
          });
          if (res.data.code != 200) {

            this.$message(res.data.message)

          }
        });

    },

    //添加班主任
    addHeadTeacher () {

      if (this.name == null) {

        this.$message("请调整班级教师结构")

      } else {
        axios
          .get(commons.baseUrl + "gradedean/addHead?name=" + this.name)
          .then(resp => {

            console.log(resp)
            this.$message(resp.data.message)
            router.go(0)

          });
      }



    },

    //分页
    findByPage () {
      axios
        .get(
          commons.baseUrl +
          "gradedean/noHeadTeacherInfo?page=" +
          this.currentPage +
          "&size=" +
          this.size
        )
        .then((res) => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },

    //下一页
    next () {
      this.currentPage = this.currentPage + 1;
      axios
        .get(
          commons.baseUrl +
          "gradedean/noHeadTeacherInfo?page=" +
          this.currentPage +
          "&size=" +
          this.size
        )
        .then((res) => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },

    //上一页
    prev () {
      this.currentPage = this.currentPage - 1;
      axios
        .get(
          commons.baseUrl +
          "gradedean/noHeadTeacherInfo?page=" +
          this.currentPage +
          "&size=" +
          this.size
        )
        .then((res) => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },
  },
  mounted () {
    //axios  get请求
    //调用方法获取第一页数据
    this.findByPage();
  },
  computed: {},
};
</script>
<style scoped></style>
